<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="send m1280">Send my requests</div>
		<!-- Description -->
		<div class="boxDescription m1280">
			<div class="description">Description</div>
			<!-- /input -->
			<div class="inpBox">
				<div class="inpText">Give your question here <span>*</span></div>
				<a-textarea v-model:value="form.here" showCount :maxlength="70" class="textAc" placeholder="Example: What rights will you have as a shareholder?" auto-size />
			</div>
			<div class="inpBox">
				<div class="inpText">Give your question here <span>*</span></div>
				<a-textarea v-model:value="form.detils" showCount :maxlength="500" class="textAcs" :auto-size="{ minRows: 5, maxRows: 8 }" placeholder="I need..." auto-size />
			</div>
			<!-- Which industry is relevant to your question?  -->
			<div class="question f f-a-c">Which industry is relevant to your question? <img style="width: 14px; height: 14px" src="/src/assets/user/6.png" alt="" /></div>
			<div class="sector f f-a-c f-j-b">
				<div class="lef">
					<div class="sectInp">Sector <span>*</span></div>
					<el-select v-model="form.sector" @change="chasngeSector" size="large" placeholder="Sector" style="width: 100%">
						<el-option v-for="item in sector" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="lef">
					<div class="sectInp">Industry <span>*</span></div>
					<el-select v-model="form.industry" size="large" placeholder="Industry" style="width: 100%">
						<el-option v-for="item in industry" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>
			<!-- /input -->
			<div class="inpBox">
				<div class="sectInp m-b-10 f f f-a-c">Choose all relevant topics <img style="margin-left: 5px; width: 14px; height: 14px" src="/src/assets/user/6.png" alt="" /></div>
				<el-select v-model="form.topics" multiple size="large" placeholder="Topics" style="width: 100%">
					<el-option v-for="item in topicsList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div style="margin-top: 32px" class="sector f f-a-c f-j-b">
				<div class="lef">
					<div class="sectInp f f-a-c">Estimated duration <img style="width: 14px; height: 14px" src="/src/assets/user/6.png" alt="" /></div>
					<el-select v-model="form.duration" size="large" placeholder="Select" style="width: 100%">
						<el-option v-for="item in timeTopions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>
			<div class="sendRequest f f-a-c">
				<div @click="comfig" class="btn hand">Send request</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted, reactive } from "vue";
	import { ClassificationTree, TopicsList } from "@/api/commonality.js";
	import { CreateRequestCount, EchoRequestCount, ModifyRequestCount } from "@/api/xpert.js";

	import { useRoute } from "vue-router";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import { ElMessage } from "element-plus";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	const indLink = ref("");
	const numInd = ref(0);
	const indsLinkUp = ref("");
	let route = useRoute();
	let id = route.query.id || 0;
	const upFile = ref(true);
	const likAddress = ref("");
	const upLoadVisible = ref(false);
	const avaList = ref([]);
	const upLinkList = ref([]);
	const avaImg = ref("");
	const value = ref("");
	const name = ref("");
	const addOne = ref([]);
	const addTow = ref([]);
	const addStree = ref([]);
	const sector = ref([]);
	const industry = ref([]);
	const topicsList = ref([]);
	const langList = ref([]);
	let obj = ref({});
	const fileList = ref([]);
	const timeTopions = ref([
		{
			value: "30",
			label: "30mins"
		},
		{
			value: "60",
			label: "60mins"
		},
		{
			value: "90",
			label: "90mins"
		}
	]);
	let form = reactive({
		here: "",
		sector: "",
		industry: "",
		topics: [],
		duration: "",
		detils: ""
	});
	onMounted(async () => {
		// 获取topics
		await topics();
		// 获取分类树
		await classFen();
		// 回显数据
		if (id) {
			await echoData();
		}
		window.addEventListener("scroll", handleScroll);
	});
	// 回显数据
	const echoData = async () => {
		let n = await EchoRequestCount({
			id: id
		});
		obj.value = n.data;
		form.topics = n.data.topicIds;
		if (n.data.sectorId) {
			chasngeSector(n.data.sectorId);
			// 表示工作
			form.sector = n.data.sectorId;
			form.industry = n.data.industry;
		}
		form.here = n.data.descriptionTitle;
		form.detils = n.data.descriptionDetail;
		form.duration = n.data.estimatedDuration + "mins";
		console.log(form, "222222222222");
	};
	// 点击提交
	const comfig = async () => {
		let n = {};
		if (id) {
			n = await ModifyRequestCount({
				id: id,
				topicIds: form.topics,
				descriptionTitle: form.here,
				descriptionDetail: form.detils,
				industry: form.industry,
				mark: "",
				estimatedDuration: [form.duration.split("")[0], form.duration.split("")[1]].join("")
			});
		} else {
			n = await CreateRequestCount({
				topicIds: form.topics,
				descriptionTitle: form.here,
				descriptionDetail: form.detils,
				industry: form.industry,
				mark: "",
				estimatedDuration: [form.duration.split("")[0], form.duration.split("")[1]].join("")
			});
		}
		if (n.code == 200) {
			ElMessage.success(n.msg);
			setTimeout(() => {
				router.go(-1);
			}, 1000);
		}
	};
	// 获取分一级类树
	const classFen = async () => {
		industry.value = [];
		let n = await ClassificationTree();
		sector.value = n.data;
		sector.value.forEach(item => {
			item.value = item.id;
			item.children.forEach(ite => {
				ite.value = ite.id;
			});
		});
	};
	// 分类树二级选择
	const chasngeSector = e => {
		form.industry = "";
		let list = sector.value.filter(item => item.id == e);
		industry.value = list[0].children;
	};
	// 获取topics列表
	const topics = async () => {
		// timeTopions.value = [
		// 	{
		// 		value: "30",
		// 		label: "30 mins"
		// 	},
		// 	{
		// 		value: "60",
		// 		label: "60 mins"
		// 	},
		// 	{
		// 		value: "90",
		// 		label: "90 mins"
		// 	}
		// ];
		let n = await TopicsList();
		topicsList.value = n.data;
		topicsList.value.forEach(item => {
			item.value = item.id;
			item.label = item.name;
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
